<script setup>
    const title = "个人基本信息";
    const name="张三";
    const age="20";
    const interest="吃饭、睡觉、打豆豆";
    const major="软件技术";

    const sign=() => {
        return `<em>${name}的个人世界</em>
                <a href="http://gitee.com/park">我的个人世界</a>
                <u>我的个人世界</u>`;
    }
</script>
<template>
    <div id="container">
        <!-- 顶部标题部分 -->
        <div id="heading">
        <h3 style="color: red;">{{title}}</h3>
        </div>
        <!-- 主体信息部分 -->
        <div id="main">
            <div style="display: flex; flex-direction: column;">
                <span>姓   名：{{name}}</span>
                <span>年   龄：{{age}}</span>
                <span>兴趣爱好：{{interest}}</span>
                <span>专   业：{{major}}</span>
                <span>个性签名:
                <span v-html="sign()"></span>
                </span>
            </div>
        </div>
    </div>
</template>

<style scoped>
    #container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #main {
        padding: 20px;
        background-color: antiquewhite;
        border-radius: 10%;
    }
</style>
